<template>
  <!-- Blog留言 -->
  <div class="blog">
    <div class="w">
      <!-- 左浮动 -->
      <div class="blog-content">
        <div class="blog-message">
          <h2 class="blog-title">您当前的位置是：Blog留言 ></h2>
          <div class="blog-login clearfix">
            <div class="login-textarea">
              <div class="show-hidden">
                <a
                  href="#"
                  class="login-dl"
                  @click="showDialog"
                  v-if="!userInfo.user"
                  >登录</a
                >
                <div class="login-dl-img" v-else>
                  <loginUser></loginUser>
                </div>
              </div>
              <a href="#" class="login-zc" @click="zhuDialog">注册</a>
              <div class="login-zc-img" v-if="userInfo.user">
                <loginUser></loginUser>
              </div>
              <div class="login-flex" v-if="show" @click.self="hiddenDialog">
                <div class="flex-content">
                  <h2 class="flex-title" v-if="flag">登录</h2>
                  <div class="flex-blog" v-if="flag">
                    <BlogLogo></BlogLogo>
                  </div>
                  <h2 class="flex-title" v-if="!flag">注册</h2>
                  <div class="flex-blog" v-if="!flag">
                    <BlogRegistered></BlogRegistered>
                  </div>
                </div>
              </div>
              <textarea
                name="text"
                placeholder="既然来了,就说几句吧"
                v-model="textarea"
              ></textarea>
            </div>
            <div class="login-said clearfix">
              <span
                class="iconfont icon-biaoqing said-bq"
                @click.stop="showEmoji"
              ></span>
              <div class="emojis" v-show="Emoji">
                <ul>
                  <li
                    v-for="(item, index) in arrEmoji"
                    :key="index"
                    @click="printEmoji(item)"
                  >
                    <span :title="item.title">{{ item.ji }}</span>
                  </li>
                </ul>
              </div>
              <span class="said-img clearfix" @click="published">
                <img
                  src="../assets/images/post-btn.png"
                  alt=""
                  title="畅言一下吧"
                  class="clearfix"
                />
              </span>
            </div>
            <!-- 留言以及评论的内容 -->
            <div class="login-text clearfix">
              <ul>
                <li
                  class="clearfix"
                  v-for="(items, index) in arrMessage"
                  :key="items._id"
                >
                  <!-- 父级评论 -->
                  <div class="content-first clearfix">
                    <div class="text-img">
                      <img :src="baseURL + items.author.photo" alt="" />
                    </div>
                    <div class="info-name">
                      <span class="text-t">{{ items.author.user }}</span>
                      <span class="text-time"  style="margin-right:15px">{{
                        formatDate(items.date)
                      }}</span>
                    </div>
                    <p class="text-text">{{ items.content }}</p>
                    <div class="text-foter">
                      <span
                        class="iconfont icon-youxiang"
                        title="回复留言"
                        @click="commentReply(items)"
                      ></span>
                      <span
                        class="iconfont icon-dianzan"
                        :class="{
                          red:
                            userInfo._id && items.liks.includes(userInfo._id),
                        }"
                        title="点赞"
                        @click="commentLiks(items._id)"
                      ></span>
                      <span class="text-num" title="点赞数">{{
                        items.liks.length
                      }}</span>
                    </div>
                  </div>
                  <!-- 子级评论 -->
                  <div
                    class="content-son clearfix"
                    v-for="(childItem, index) in items.children"
                    :key="childItem._id"
                  >
                    <div class="text-img">
                      <img :src="baseURL + childItem.author.photo" alt="" />
                    </div>
                    <div class="info-name">
                      <span class="text-t">{{ childItem.author.user }}</span>
                      <span class="text-time" style="margin-right:15px">{{
                        formatDate(childItem.date)
                      }}</span>
                    </div>
                    <p class="text-text">
                      <span
                        style="
                          color: black;
                          font-weight: 700;
                          margin-right: 15px;
                        "
                        >{{ childItem.author.user }}
                        <i style="color: #666; font-weight: 400">回复</i>
                        {{ childItem.replyUser.user }}:</span
                      >{{ childItem.content }}
                    </p>
                    <div class="text-foter">
                      <span
                        class="iconfont icon-youxiang"
                        title="回复留言"
                        @click="childReply(items, childItem)"
                      ></span>
                      <span
                        class="iconfont icon-dianzan"
                        title="点赞"
                        :class="{
                          red:
                            userInfo._id &&
                            childItem.liks.includes(userInfo._id),
                        }"
                        @click="replayLiks(items._id, childItem._id, index)"
                      ></span>
                      <span class="text-num" title="点赞数">{{
                        childItem.liks.length
                      }}</span>
                    </div>
                  </div>
                  <!-- 回复评论 -->
                  <div
                    class="letter clearfix"
                    :class="{
                      firstshow: items.isShowReply,
                      bigheight: items.bigheight,
                    }"
                  >
                    <textarea
                      :placeholder="`回复${items.replyUser.user}`"
                      v-model="items.smalltext"
                    ></textarea>
                    <div class="login-said clearfix">
                      <span
                        class="iconfont icon-biaoqing said-bq"
                        @click.stop="smallEmoji(items)"
                      ></span>
                      <div class="emojis" v-if="items.xiaoEmoji">
                        <ul>
                          <li
                            v-for="(item, index) in arrEmoji"
                            :key="index"
                            @click="letterEmoji(items, item)"
                          >
                            <span :title="item.title">{{ item.ji }}</span>
                          </li>
                        </ul>
                      </div>
                      <span
                        class="said-img clearfix"
                        @click="submitReply(items)"
                      >
                        <img
                          src="../assets/images/post-btn.png"
                          alt=""
                          title="畅言一下吧"
                          class="clearfix"
                        />
                      </span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 右浮动 -->
      <div class="blog-hot">
        <HotLabels></HotLabels>
      </div>
    </div>
  </div>
</template>

<script>
// 引入子组件
import HotLabels from "../components/HotLabels.vue";
import BlogLogo from "../components/logo/BlogLogo.vue";
import loginUser from "../components/logo/loginUser.vue";
import BlogRegistered from "../components/logo/BlogRegistered.vue";
import { mapState } from "vuex";
import { computed } from "vue";
export default {
  name: "BlogLeave",
  components: {
    HotLabels,
    BlogLogo,
    BlogRegistered,
    loginUser,
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  data() {
    return {
      show: false,
      flag: false,
      Emoji: false,
      xiaoEmoji: false,
      bigheight: false,
      // isShowReply:false,
      smalltext: "",
      textarea: "",
      // smalltext:"",
      arrEmoji: [
        { title: "咧嘴笑", ji: "😀" },
        { title: "笑嘻嘻", ji: "😁" },
        { title: "喜悦的泪水", ji: "😂" },
        { title: "开口笑脸", ji: "😃" },
        { title: "冷汗", ji: "😅" },
        { title: "紧闭眼睛", ji: "😆" },
        { title: "眨眼表情", ji: "😉" },
        { title: "面带微笑", ji: "😊" },
        { title: "品尝美味", ji: "😋" },
        { title: "太阳镜", ji: "😎" },
        { title: "面带心形", ji: "😍" },
        { title: "飞吻表情", ji: "😘" },
        { title: "亲吻表情", ji: "😗" },
        { title: "含笑亲吻", ji: "😙" },
        { title: "闭眼亲吻", ji: "😚" },
        { title: "光环笑脸", ji: "😇" },
        { title: "中性面", ji: "😐" },
        { title: "面无表情", ji: "😑" },
        { title: "傻笑", ji: "😏" },
        { title: "坚持", ji: "😣" },
        { title: "失望的", ji: "😥" },
        { title: "张着嘴", ji: "😮" },
        { title: "安静", ji: "😯" },
        { title: "困", ji: "😪" },
        { title: "疲惫", ji: "😫" },
        { title: "熟睡", ji: "😴" },
        { title: "安心", ji: "😌" },
        { title: "吐舌头", ji: "😛" },
        { title: "垂头丧气", ji: "😒" },
        { title: "冷汗", ji: "😓" },
        { title: "沉思", ji: "😔" },
        { title: "困惑", ji: "😕" },
        { title: "惊讶", ji: "😲" },
        { title: "戴口罩", ji: "😷" },
        { title: "被打败", ji: "😖" },
        { title: "失望", ji: "😞" },
        { title: "忧伤", ji: "😟" },
        { title: "胜利", ji: "😤" },
        { title: "哭泣", ji: "😢" },
        { title: "大哭", ji: "😭" },
        { title: "张嘴哭", ji: "😦" },
        { title: "痛苦", ji: "😧" },
        { title: "恐惧", ji: "😨" },
        { title: "狰狞", ji: "😬" },
        { title: "淌冷汗", ji: "😰" },
        { title: "恐惧", ji: "😱" },
        { title: "红扑扑", ji: "😳" },
        { title: "晕", ji: "😵" },
        { title: "撅嘴", ji: "😡" },
        { title: "难过", ji: "😠" },
      ],
      // 生成留言评论
      arrMessage: [],
    };
  },
  methods: {
    showDialog() {
      this.show = true;
      this.flag = true;
    },
    hiddenDialog() {
      this.show = false;
    },
    zhuDialog() {
      this.show = true;
      this.flag = false;
    },
    // 表情按钮
    showEmoji(index) {
      this.Emoji = !this.Emoji;
    },
    printEmoji(item) {
      this.textarea += item.ji;
    },
    //  回复框表情按钮
    smallEmoji(items) {
      //  this.xiaoEmoji = !this.xiaoEmoji;
      items.bigheight = !items.bigheight;
      items.xiaoEmoji = !items.xiaoEmoji;
    },
    letterEmoji(items, item) {
      items.smalltext += item.ji;
    },
    //  时间格式转换
    formatDate(date) {
      let d = new Date(date),
        YY = d.getFullYear(),
        MM = d.getMonth() + 1,
        DD = d.getDate(),
        hh = d.getHours(),
        mm = d.getMinutes(),
        ss = d.getSeconds();
        hh = hh < 10 ? '0'+hh:hh; 
        mm = mm < 10 ? '0'+mm:mm; 
        ss = ss < 10 ? '0'+ss:ss; 
      return `${YY}-${MM}-${DD} ${hh}:${mm}:${ss}`;
    },
    // 点击按钮发起请求，将留言内容提交给后端
    async published() {
      // 判断用户是否登录
      if (!this.userInfo.user)
        return this.$message.error("请先登录，登录后才能评论哦");
      // 判断留言框是否为空
      let valMsg = this.textarea.trim(); //去掉首尾后的评论框
      if (!valMsg) return this.$message.error("评论内容不能为空");

      // 将评论的内容发送给后端
      let { data } = await this.$axios({
        method: "POST",
        url: "/msg/publish",
        data: { valMsg },
      });
      // console.log(data);
      // 评论发表失败
      if (data.code) return this.$message.success(data.message);
      // 评论发表成功
      this.$message.success(data.message);
      this.getMessage(); //重新获取全部的留言数据
      this.textarea = ""; // 清空文本域内容
    },
    // 发起请求 获取所有留言数据
    async getMessage() {
      //提交数据到后端
      let { data } = await this.$axios({
        method: "GET",
        url: "/getdata/msg",
      });
      // console.log(data.data);
      data.data.forEach((items) => {
        items.isShowReply = false; //控制当前这条评论下的回复框显示/隐藏
        // items.letterply = ""; //回复框
        items.replyUser = items.author; // 父级评论的id
        items.xiaoEmoji = false;
        items.bigheight = false;
        items.smalltext = ""; //回复框表情选中
        // console.log(items.smalltext);
      });

      // 将数据给数组
      this.arrMessage = data.data;
      // console.log(this.arrMessage);
    },
    // 给父级评论点赞
    async commentLiks(commentId) {
      // 判断用户是否登录
      if (!this.userInfo.user)
        return this.$message.error("请先登录，登录后才能评论哦");

      //提交数据到后端
      let { data } = await this.$axios({
        method: "POST",
        url: "/msg/liks/comment",
        data: { id: commentId }, // 传入这条评论的id给后端
      });
      // console.log(data);
      // 点赞失败
      if (data.code) return this.$message.success(data.message);
      // 点赞成功
      // this.$message.success(data.message);
      this.getMessage(); // 重新获取全部的留言数据
    },
    //  点击父级评论回复按钮：显示 与 隐藏 回复框
    async commentReply(items) {
      if (!this.userInfo.user)
        return this.$message.error("请先登录，登录后才能评论哦");
      // 判断当前点击的回复按钮 与一级评论的作者不相同
      if (items.author._id !== items.replyUser._id) {
        items.isShowReply = true;
        // items.bigheight = true;
      } else {
        items.isShowReply = !items.isShowReply;
        // items.bigheight = !items.bigheight;
      }
      // 修改回复谁  @
      items.replyUser = items.author;
    },
    // 点击父级回复的评论，   回复提交按钮
    async submitReply(items) {
      if (!this.userInfo.user)
        return this.$message.error("请先登录，登录后才能评论哦");
      // 子回复的内容
      // 子回复的作者
      // 这条评论的id
      let content = items.smalltext.trim(); //清除子回复的左右空格
      if (!content) return this.$message.error("回复内容不能为空");
      // if(content.length > 100) return this.$message.error("字数不能超过100");
      let { data } = await this.$axios({
        method: "POST",
        url: "/msg/reply/submit",
        data: {
          id: items._id, // 父级的id
          content, //回复的内容
          replyUser: items.replyUser._id, // 给父级评论的作者id
        },
      });
      if (data.code) return this.$message.error(data.message);
      this.$message.success(data.message);
      this.smalltext = "";
      this.getMessage(); // 重新获取留言数据
    },
    // 点击子级回复的 点赞按钮
    async replayLiks(parentId, childId, childIndex) {
      // 父级评论的id， 子级回复的id， 子级在children回复中的id
      // 判断用户是否登录
      if (!this.userInfo.user)
        return this.$message.error("请先登录，登录后才能评论哦");
      // 提交数据
      let { data } = await this.$axios({
        method: "POST",
        url: "/msg/likes/replay",
        data: { parentId, childId, childIndex },
      });
      // console.log(data);
      if (data.code) return this.$message.error(data.message);
      this.getMessage(); // 重新获取最新的留言数据
    },
    //  点击子级回复按钮
    childReply(items, childItem) {
      if (!this.userInfo.user)
        return this.$message.error("请登录，登录后才能发表留言哦！");
      // 判断当前点击的回复按钮 与一级评论的作者不相同
      if (childItem.author._id !== items.replyUser._id) {
        items.isShowReply = true;
        // items.bigheight = true;
      } else {
        items.isShowReply = !items.isShowReply;
        // items.bigheight = !items.bigheight;
      }
      // 点击谁，回复里的@就是谁
      items.replyUser = childItem.author;
    },
  },
  created() {
    //组件加载时就要渲染留言数据
    this.getMessage(); // 调用
    this.formatDate();
  },
  mounted() {
    document.documentElement.addEventListener("click", (items) => {
      this.Emoji = false;
      this.xiaoEmoji = false;
      this.bigheight = false;
      items.xiaoEmoji = false;
    });
  },
};
</script>

<style lang="less" scoped>
.blog {
  margin-top: 70px;
}
// 左边浮动
.blog-content {
  margin-right: 305px;
}
.blog-content .blog-message {
  float: left;
  width: 100%;
  // height: 1500px;
  margin-bottom: 20px;
  background-color: #fffbf0;
}
.blog-message .blog-title {
  padding: 6px 20px;
  color: #1b1a1a;
  font-size: 16px;
  background-color: #f7f7f7;
  cursor: text;
  border-bottom: 4px solid rgb(247, 31, 31);
}
.blog-message .blog-login {
  margin-top: 50px;
  background-color: #fffbf0;
  // height: 200px;
}
.blog-login .login-textarea {
  position: relative;
  border: 1px solid #e74851;
  width: 80%;
  margin: 0 10%;
  height: 200px;
  border-radius: 35px;
}
.login-textarea .login-dl,
.login-textarea .login-zc {
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  line-height: 60px;
  color: #e74851;
  text-align: center;
  font-size: 22px;
  font-family: "隶书";
  border-radius: 50%;
  font-weight: 700;
  border: 2px solid #e74851;
  box-sizing: border-box;
}
.login-textarea .login-dl {
  top: -30px;
  left: -17px;
}
.login-textarea .login-zc {
  top: -30px;
  right: -17px;
}
.login-textarea .login-dl-img {
  position: absolute;
  top: -30px;
  left: -17px;
}
.login-textarea .login-zc-img {
  position: absolute;
  top: -30px;
  right: -17px;
}

.login-textarea .login-flex {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11111;
}
.login-flex .flex-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  padding: 15px 20px;
  transform: translate(-50%, -50%);
  background-color: #fff;
  z-index: 1000;
}
.flex-content .flex-title {
  padding: 10px 20px;
  border-bottom: 1px solid #1b1a1a;
  font-weight: 400;
}
.flex-content .flex-blog {
  margin-top: 30px;
  padding: 0 20px;
}
.login-textarea textarea {
  width: 100%;
  height: 200px;
  padding: 30px 0 0 30px;
  border-radius: 35px;
  font-family: "行书";
  letter-spacing: 3px;
  box-sizing: border-box;
  overflow-x: hidden;
}
.blog-login .login-said {
  position: relative;
  width: 80%;
  margin: 10px 10% 0;
}
.login-said .emojis {
  position: absolute;
  top: 40px;
  width: 360px;
  background-color: #fff;
  padding: 2px;
  border: 2px solid #ff6700;
  border-radius: 15px;
}
.login-said .emojis::after {
  position: absolute;
  top: -20px;
  left: 10px;
  content: "";
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-color: transparent transparent #ff6700 transparent;
}
.emojis ul li {
  float: left;
  width: 35px;
  height: 35px;
  border-right: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
}
.emojis ul li span {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin: 8px 9px;
  cursor: pointer;
}
.emojis ul li:nth-child(10n) {
  border-right: none;
}
.emojis ul li:nth-child(n + 41) {
  border-bottom: 1px solid transparent;
}
.login-said .said-bq {
  float: left;
  font-size: 25px;
  margin-top: 10px;
  margin-left: 10px;
  cursor: pointer;
}
.login-said .said-img {
  float: right;
  cursor: pointer;
}
// 留言及评论
.blog-login .login-text {
  width: 80%;
  // height: 200px;
  margin: 10px 10%;
  // background-color: #fef6f6;
}
.login-text .content-first {
  margin-bottom: 10px;
  background-color: #f7f7f7;
}
.login-text ul li {
  padding: 13px 0 11px;
  border-bottom: 1px solid #e5e5e5;
}
.login-text .text-img {
  float: left;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 15px;
}
.info-name .text-t {
  color: #ff6700;
  font-size: 14px;
  margin-right: 10px;
}
.info-name .text-time {
  float: right;
  color: rgb(165, 158, 158);
  font-size: 14px;
}

.text-img img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
.login-text .text-text {
  margin: 12px 0;
  font-size: 14px;
}
.login-text .text-foter {
  float: right;
}
.login-text .text-foter span {
  font-size: 16px;
  cursor: pointer;
}
.login-text .text-foter .red {
  color: red;
}
.login-text .text-foter span:first-child {
  margin: 0 18px;
}
.login-text .text-foter span:nth-child(1):hover,
.login-text .text-foter span:nth-child(2):hover {
  color: #ff6700;
}
.login-text .text-foter .text-num {
  margin-left: 3px;
  margin-right: 20px;
  font-size: 14px;
}
// 子级评论
.login-text .content-son {
  padding-top: 10px;
  margin-left: 50px;
  margin-bottom: 10px;
  background-color: #fff;
}
// 回复
.login-text .letter {
  display: block;
  margin-left: 60px;
  height: 0px;
  overflow: hidden;
  transition: height 1s;
  // background-color: skyblue;
}
.login-text .firstshow {
  height: 140.67px;
  // overflow: none;
}
.login-text .bigheight {
  height: 460px;
}
.letter textarea {
  width: 100%;
  height: 100px;
  padding: 20px 0 0 30px;
  border-radius: 35px;
  font-family: "行书";
  letter-spacing: 3px;
  box-sizing: border-box;
  border: 1px solid #e74851;
  overflow-x: hidden;
}
.letter .login-said {
  width: 100%;
  margin: 0;
}
.letter .login-said .said-bq {
  margin-left: 20px;
}
.letter .login-said .emojis::after {
  left: 10px;
}
.letter .login-said .emojis {
  left: 10px;
}
// 右边浮动
.blog-hot {
  float: right;
  width: 290px;
}
</style>